<template>
	<base-page class="base-form" title="证书详情" @back="onCancel()">
		<view class="main-box">
			<view class="content-box">
				<view class="container">
					<div id="pdfDom">
						<div class="proBox">
							<!-- <p class="tit">结业证书</p> -->
							<p class="con" style="text-indent: 0">
								<span class="con-name">{{ scoreResult.studentName }}</span>
								<span style="font-size: 16px">（{{ scoreResult.companyName }}）</span>
								<span class="Normal">学员：</span>
							</p>
							<p class="con" style="">
								<span class="Normal">于</span>
								<span class="Bold">{{formatDate(scoreResult.startTime)}}</span>
								<span class="Normal">至</span>
								<span class="Normal">于</span>
								<span class="Bold">{{formatDate(scoreResult.endTime)}}</span>
								<span class="Normal">参加崇明区教育系统</span>
								<span class="Bold">{{scoreResult.className}}</span>
								<span class="Normal"> 能力提升研修班培训，经考核成绩合格，获</span>
								<span class="Bold">{{scoreResult.score}}</span>
								<span class="Normal">分，准予结业，特颁此证。</span>
							</p>
							<div class="con-unit1">
								<p class="proid"><span>查询编号：</span> <span>{{scoreResult.certificateNo}}</span></p>
							</div>

							<!-- <canvas style="width: 300px; height: 200px;" canvas-id="sealCanvas"
								id="sealCanvas"></canvas> -->
							<div class="con-unit2">
								<p>崇明区教育学院干部教育研究中心</p>
								<p class="time">{{formatDate2(scoreResult.endTime)}}</p>
							</div>
							<!-- <p class="con-footer"> 监制</p> -->
						</div>
					</div>
					<button class="mini-btn" type="primary" size="mini" style="margin-right: 10px;float: right;"
						@click="getPdf()">
						下载PDF
					</button>
				</view>
			</view>
		</view>
	</base-page>
</template>

<script>
	import html2canvas from 'html2canvas';
	import jsPDF from 'jspdf';

	import {
		CourseInfoController
	} from "@/api";
	export default {
		data() {
			return {
				scoreResult: {},
			};
		},
		onLoad(option) {
			this.getScoreDetail(JSON.parse(decodeURIComponent(option.obj)));
		},
		onReady(e) {
			// this.drawSeal();
		},
		methods: {
			// 绘制印章
			drawSeal() {
				const ctx = uni.createCanvasContext('sealCanvas', this);
				const diameter = 140; // 公章直径
				const radius = diameter / 2;
				const centerX = radius;
				const centerY = radius;

				// 绘制公章外圆
				ctx.beginPath();
				ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
				ctx.setStrokeStyle('rgb(255, 0, 0)');
				ctx.setLineWidth(2);
				ctx.stroke();

				// 绘制中心五角星
				const starSize = radius / 3; // 五角星大小
				const starPoints = [];
				const angleStep = (Math.PI * 2) / 5;
				for (let i = 0; i < 5; i++) {
					const outerAngle = i * angleStep - Math.PI / 2;
					const innerAngle = outerAngle + angleStep / 2;
					starPoints.push({
						x: centerX + starSize * Math.cos(outerAngle),
						y: centerY + starSize * Math.sin(outerAngle)
					});
					starPoints.push({
						x: centerX + (starSize / 2) * Math.cos(innerAngle),
						y: centerY + (starSize / 2) * Math.sin(innerAngle)
					});
				}
				ctx.beginPath();
				ctx.moveTo(starPoints[0].x, starPoints[0].y);
				for (let i = 1; i < starPoints.length; i++) {
					ctx.lineTo(starPoints[i].x, starPoints[i].y);
				}
				ctx.closePath();
				ctx.setFillStyle('rgb(255, 0, 0)');
				ctx.fill();

				// 绘制外圈文字
				const text = '崇明区教育学院干部教育研究中心';
				const fontSize = 18;
				ctx.setFontSize(fontSize);
				ctx.setFillStyle('rgb(255, 0, 0)');
				const textRadius = radius - 18; // 文字所在圆的半径
				const textAngleStep = Math.PI * 2 / text.length;
				for (let i = 0; i < text.length; i++) {
					const char = text[i];
					const angle = i * textAngleStep - Math.PI / 2;
					const x = centerX + textRadius * Math.cos(angle);
					const y = centerY + textRadius * Math.sin(angle);
					ctx.save();
					ctx.translate(x, y);
					ctx.rotate(angle + Math.PI / 2);
					ctx.fillText(char, 0, 0);
					ctx.restore();
				}

				// 绘制到 canvas 上
				ctx.draw();
			},
			// 处理下载pdf证书
			getPdf() {
				const pdfDom = document.getElementById('pdfDom');
				if (pdfDom) {
					html2canvas(pdfDom).then((canvas) => {
						const imgData = canvas.toDataURL('image/png');
						const pdf = new jsPDF('p', 'mm', 'a4');
						const imgWidth = 210;
						const imgHeight = (canvas.height * imgWidth) / canvas.width;
						pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
						pdf.save('certificate.pdf');
					});
				}
			},
			getScoreDetail(obj) {
				CourseInfoController.getScoreDetail(this, obj)
					.then((res) => {
						this.scoreResult = res;
					})
					.catch((err) => {
						console.error(err);
					});
			},
			onCancel() {
				uni.navigateBack();
			},
			formatDate(dateStr) {
				const date = new Date(dateStr);
				if (isNaN(date.getTime())) {
					return "无效日期";
				}
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();

				return `${year}年${month}月${day}号`;
			},
			formatDate2(dateStr) {
				const date = new Date(dateStr);
				if (isNaN(date.getTime())) {
					return "无效日期";
				}
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();

				return `${year}年${month}月`;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.Normal {
		color: #2d2d2d;
		font-size: 18px;
		font-weight: 500;
	}

	.Bold {}

	.proBox {
		background-size: cover;
		width: 100%;
		height: 380px;
		padding: 10px;
		box-sizing: border-box;
		margin: 0 auto;
		position: relative;
		color: #000;
		font-family: SimSun;
	}

	.tit {
		color: #cf0c0c;
		font-size: 32px;
		font-weight: 700;
		position: relative;
		top: -6px;
		left: 8px;
		letter-spacing: 10px;
		font-family: STHeiti;
		margin: 20px 0;
		text-align: center;
	}

	.proid {
		text-align: right;
		margin: 0;
		font-weight: 500;
		/* margin-right: 5px; */
	}

	.con {
		font-size: 15px;
		font-weight: 700;
		text-align: left;
		margin: 10px 0;
		line-height: 32px;
		text-indent: 2em;
		letter-spacing: 1px;
	}

	.con-name {
		//   font-family: 华文行楷, STXingkai;
		//   border-bottom: 2px solid #000;
		margin: 0 10px;
		font-size: 22px;
	}

	.con-unit1 {
		font-size: 14px;
		font-weight: 700;
		position: absolute;
		left: 10px;
		bottom: 100px;
		text-align: right;
	}

	.con-unit2 {
		font-size: 16px;
		font-weight: 700;
		position: absolute;
		right: 10px;
		bottom: 20px;
		text-align: right;
		letter-spacing: 3px;
	}

	.con-unit2 p {
		margin: 5px 0;
	}

	.con-footer {
		font-size: 18px;
		font-weight: 700;
		position: absolute;
		bottom: 45px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.chapter {
		border-radius: 50%;
		position: absolute;
		bottom: 75px;
		right: 134px;
	}
</style>